<template>
  <div class="dish-detail">
    <div style="margin-left: 50px">
      <el-card>
        <img :src="state.image_url" alt="" />
      </el-card>
    </div>
    <div style="margin-left: 50px">
      <h1>菜名：{{ state.dish_name }}</h1>
      <p>描述：{{ state.description }}</p>
      <p>价格：{{ state.price }}</p>
      <el-button @click="$router.back(-1)" style="margin-top: 20px">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
import { getDishDetailApi } from "@/utils/api";

const id = route.params.id;
console.log(id);

const state = ref({});

const fetchData = async () => {
  const res = await getDishDetailApi({ id });
  console.log(res.data);
  res.data.image_url = `http://127.0.0.1:3000/images/${res.data.image_url}`;
  state.value = res.data;
};

fetchData();

const methods = {};
</script>
<style lang="less" scoped>
.dish-detail {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 50px;

  img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
  }

  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
    margin-bottom: 10px;
  }

  p:last-child {
    margin-bottom: 0;
  }

  .router-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #41b883;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;

    &:hover {
      background-color: #308e71;
    }
  }
}
</style>
